<template>
  <div class="class-component" v-loading="loading">
    <header class="header">
      <div class="left">
        <el-radio-group v-model="pageValue">
          <el-radio-button label="教学信息"></el-radio-button>
          <el-radio-button label="班级信息"></el-radio-button>
        </el-radio-group>

        <el-select v-model="gradeId">
          <el-option
            v-for="{ id, name } in gradeList"
            :label="name"
            :value="id"
          >
          </el-option>
        </el-select>
      </div>
      <div class="right">
        <div class="btn" @click="toAddClass()" v-if="pageValue === '班级信息'">
          新增班级
        </div>
        <ButtonPermission code="rights:editTable" mode="disable" v-else>
          <template #default="{ disabled }">
            <div 
              class="btn" 
              :class="{ disabled: disabled }"
              @click="!disabled && toEditTechInfo()"
            >在线批量编辑</div>
          </template>
        </ButtonPermission>
      </div>
    </header>
    <main class="view-wrapper">
      <ClassListView :gradeId="gradeId" v-if="pageValue === '班级信息'" />
      <TeachInfoView :gradeId="gradeId" v-else />
    </main>
  </div>
</template>

<script>
import ClassListView from './ClassListView.vue';
import TeachInfoView from './TeachInfoView.vue';
import ButtonPermission from '@/components/common/ButtonPermission.vue';
import eventBus from '@/utils/eventBus';
import { mapState } from 'vuex';
export default {
  name: 'ClassComponent',
  components: {
    ClassListView,
    TeachInfoView,
    ButtonPermission,
  },
  data() {
    return {
      loading: false,
      pageValue: '教学信息',
      gradeList: [],
      gradeId: 0,
    };
  },
  computed: {
    ...mapState('school', ['schoolOptions']),
  },
  watch: {},

  async mounted() {
    this.getGradeList();
  },

  methods: {
    getGradeList() {
      const { F_grades } = this.schoolOptions;
      for (let k of Object.keys(F_grades)) {
        const grade = this.$maps.gradeList.find((e) => e.id === +k);
        if (grade) {
          this.gradeList.push(grade);
        }
      }
      this.gradeId = this.gradeList.length ? this.gradeList[0].id : '';
    },
    toAddClass() {
      eventBus.$emit('to-add-class');
    },
    toEditTechInfo() {
      eventBus.$emit('to-edit-teach-info');
    },
  },
};
</script>

<style lang="less" scoped>
.class-component {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  .header {
    height: 76px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    .btn {
      color: #009cff;
      cursor: pointer;
      
      &.disabled {
        color: #c0c4cc;
        cursor: not-allowed;
        opacity: 0.6;
      }
    }
    .left {
      .el-radio-group {
        height: 35px;
        margin-right: 30px;
        :deep(.el-radio-button) {
          height: 35px;
        }
        :deep(.el-radio-button__inner) {
          height: 35px;
          line-height: 35px;
          padding-top: 0;
          padding-bottom: 0;
        }
      }
      .el-select {
        width: 130px;
        height: 35px;
        margin-right: 14px;
        &:last-child {
          margin-right: 0;
        }
        :deep(.el-input__inner) {
          height: 32px;
          line-height: 32px;
        }
        :deep(.el-input__icon) {
          line-height: 32px;
        }
      }
    }
  }
  .view-wrapper {
    flex: 1;
    overflow-y: auto;
  }
}
</style>
